<template>
  <el-container>
    <el-aside width="200px">
      <router-link :to="{ name: 'articles' }" class="logo">
        <img :src="Logo" alt="logo" />
      </router-link>
      <el-divider content-position="right">超厉害</el-divider>
      <el-menu
        background-color="#f56c6c"
        text-color="#333"
        active-text-color="#fff"
        default-active="/articles"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/articles">
          <i class="el-icon-knife-fork"></i>
          <span slot="title">文章管理</span>
        </el-menu-item>
        <el-menu-item index="home">
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="about">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import Logo from "@/assets/logo.png";

export default {
  name: "ArticlesApp",
  data() {
    return {
      Logo
    };
  },
  methods: {}
};
</script>

<style scoped lang="less">
.el-header {
  background-color: #409eff;
}
.el-footer {
  background-color: #909399;
}

.el-aside {
  background-color: #f56c6c;
  height: 100vh;

  .logo {
    display: block;
    width: 100px;
    margin: 0 auto;

    img {
      width: 100%;
    }
  }
}

.el-main {
  /*background-color: #909399;*/
}
</style>
